<template>
    <div>
        <div class="title">
            <div class="hot">国内疫情地图</div>
        </div>
        <!-- 按钮 -->
        <div class="btn">
            <van-button :type="info" size="mini" @click="changeMap(1)">现有确诊</van-button>
            <van-button :type="info2" size="mini" @click="changeMap(2)">累计确诊</van-button>
        </div>
        <!-- 2.为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="main" style="width: 7.5rem;height:8rem;"></div>
    </div>
</template>

<script>

    export default{ 
        data(){
            return{
                info:'info',
                info2:'default',
                curConfirm:[],//现有确诊
                confirm:[],//累计确诊

            }
        },  
        methods:{
            changeMap(val){
                if(val == 1){
                    this.info = 'info',
                    this.info2 = 'default',
                    this.$mycharts.chinaMap('main',this.curConfirm)
                }else{
                    this.info2 = 'info',
                    this.info = 'default',
                    this.$mycharts.chinaMap('main',this.confirm)
                }
            }
         
        }, 
        mounted(){
            //获取中国地图数据------------------------------------
            this.$api.getChina()
            .then(res=>{
                console.log('中国疫情-------',res.data);
                let data = res.data.retdata;
                //现有确诊
                let arr = [];
                data.forEach(ele => {
                    let obj = {}
                    obj.name = ele.xArea;
                    obj.value = ele.curConfirm;
                    arr.push(obj)
                });
                //累计确诊
                let arr2 = [];
                data.forEach(ele => {
                    let obj = {}
                    obj.name = ele.xArea;
                    obj.value = ele.confirm;
                    arr2.push(obj)
                });
                this.curConfirm = arr;
                this.confirm = arr2;
                
                //绘制地图------需要接收name和value----------------------------------
                this.$mycharts.chinaMap('main',arr)
                // console.log('arr---',arr);
            })
            //---世界地图---------------------------------
            this.$api.getWorld()
            .then(res=>{
                console.log('---世界地图-----',res.data);
            })

        },
       
    }
</script>
  
<style lang="less" scoped>
 .title{
        margin: 0.2rem;
        display: flex;
        //伪类生成竖线
        &::before{
            content: "";
            width: 0.1rem;
            height: 0.32rem;
            margin: 0.05rem;
            background:#4169e2;
        }

        .hot{
            margin-left: 0.14rem;
        }
    }
.btn{
    margin: 0.2rem;
}
</style>  